<template>
    <div class="rigth-box" style="padding: 10px 20px 14px;">
        <div class="rigth-box-content" style="padding-right: 0px;">
            <div class="box-card-container">
                <el-card class="box-card" v-for="(item, index) in list" :key="'_card' + index"
                    v-if="item.list && item.list.length > 0">
                    <div slot="header" class="clearfix">
                        <div style="display: flex; align-items: center;">
                            <el-checkbox v-model="item.isParentCheck" :label="item.title" class="parent-checkbox"
                                @change="handleParentCheck(item)"></el-checkbox>
                        </div>
                    </div>
                    <div>
                        <div v-for="(oitem, oindex) in item.list" :key="'_o' + oindex" class="font_size14 o-item">
                            <el-checkbox v-model="oitem.isCheck" :label="oitem.title"
                                @change="handleChildCheck(item)"></el-checkbox>
                        </div>
                    </div>
                </el-card>
            </div>
        </div>
        <div class="rigth-box-footer flex_between">
            <div class="summary-info"></div>
            <div class="action-buttons">
                <el-button type="primary" @click="rightstHandle" size="large" class="btn-confirm"> 确 定
                </el-button>
            </div>
        </div>
    </div>
</template>

<script setup>
import { ref, computed, defineProps, defineEmits, watch, onMounted, getCurrentInstance, nextTick } from '@vue/composition-api'
import { useCommonHooks } from '@/hooks/useCommonHooks.js'
// 使用全局状态
const { stateHooks } = useCommonHooks()
import config from "@/js/conf/Config.js"
// 获取当前组件实例
const { proxy } = getCurrentInstance()

const emit = defineEmits(['update:rights', 'rightsClose'])

const props = defineProps({
    rights: {
        type: Array,
        default: () => [],
    },
})

// 处理数据返回父级
const rightstHandle = () => {
    let listArr = []
    for (let i = 0; i < list.value.length; i++) {
        let item = list.value[i]
        if (item?.isParentCheck == true) {
            listArr.push(item.id)
        }
        let rigshts = item?.list || []
        if (rigshts && rigshts.length > 0) {
            for (let j = 0; j < rigshts.length; j++) {
                let sitem = rigshts[j]
                // 现在isCheck是布尔值，可以直接判断
                if (sitem.isCheck == true) {
                    // 将字符串id转换为数字后再push到数组中
                    listArr.push(sitem.id)
                }
            }
        }
    }
    // 现在数组中的元素已经是数字类型，直接排序即可
    listArr.sort((a, b) => a - b)
    console.log('listArr===', listArr)
    emit('update:rights', listArr)
    emit('rightsClose', true)
}


// 成员信息
const list = ref([])
const getRightsLs = async () => {
    try {
        let res = await proxy.$api({
            url: config.company_rights_ls, data: {}
        })
        let result = res.data || []
        if (res.status == 1) {
            result.forEach(ele => {
                if (ele?.list && ele?.list.length > 0) {
                    ele.list.forEach(item => {
                        // 确保 isCheck 是布尔值
                        item.isCheck = rightsList.value.includes(item.id)
                    });
                    // 根据子项选中情况设置父级isParentCheck
                    // 只要有一个子项isCheck为true，父级isParentCheck就为true
                    ele.isParentCheck = ele.list.some(item => item.isCheck == true)
                }
            });
            list.value = result
        }
    } catch (error) {
    } finally {
    }
}


// 处理父级复选框变化
const handleParentCheck = (parentItem) => {
    if (parentItem.list && parentItem.list.length > 0) {
        parentItem.list.forEach(item => {
            item.isCheck = parentItem.isParentCheck
        })
    }
}

// 处理子项复选框变化
const handleChildCheck = (parentItem) => {
    if (parentItem?.list && parentItem?.list.length > 0) {
        parentItem.isParentCheck = parentItem.list.some(item => item.isCheck == true)
    }
}

const rightsList = ref([])
watch(() => props.rights, (newVal) => {
    if (newVal && newVal.length > 0) {
        rightsList.value = [...newVal]
    } else {
        rightsList.value = []
    }
}, { immediate: true, deep: true })

const open = () => {
    nextTick(() => {
        setTimeout(() => {
            getRightsLs()
        }, 100)
    })
}

onMounted(() => { })

defineExpose({
    open,
})

</script>

<style lang="scss" scoped>
.rigth-box {
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    height: 100%;
    /* 确保容器有明确高度 */
    overflow: hidden;

    .rigth-box-content {
        box-sizing: border-box;
        flex: 1;
        height: 0;
        /* 关键：让flex-grow生效 */
        min-height: 0;
        /* 允许收缩 */
        padding-right: 100px;
        overflow-y: auto;
        /* 内容溢出时显示滚动条 */
    }

    .rigth-box-footer {
        flex-shrink: 0;
        /* 防止footer被压缩 */
        border-top: 1px solid #f1f1f1;
        margin-top: 10px;
        padding: 14px 10px 4px;

        .summary-info {
            display: flex;
            align-items: center;
            gap: 16px;
        }

        .action-buttons {
            display: flex;
            gap: 12px;

            .btn-cancel {
                border-color: #cbd5e1;
                color: #64748b;
            }

            .btn-confirm {
                background-color: #3b82f6;
                border-color: #3b82f6;
            }
        }
    }
}

.box-card-container {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;

    .box-card {
        width: calc(100% / 4 - 12px);

        // height: 400px;
        .parent-checkbox {
            font-weight: bold;
            font-size: 16px;

            ::v-deep .el-checkbox__label {
                font-weight: bold;
                color: #303133;
            }
        }

        .o-item {
            font-size: 16px;
            padding: 4px 0;
        }
    }
}

::v-deep .el-card__header {
    padding: 10px 20px;
    font-size: 18px !important;
    font-weight: bold;
}
</style>